<template>
  <el-cascader ref="cascader" v-model="value" :options="options" :props="defaultProps" filterable class="width-100" @change="onInput"></el-cascader>
</template>

<script>
export default {
  name: 'area-picker',
  model: {
    prop: 'val',
    event: 'change',
  },
  props: {
    val: String,
    filterFunc: Function,
  },
  data () {
    return {
      value: this.val,
      defaultProps: {
        label: 'name',
        value: 'code',
        children: 'children',
        leaf: 'isLeaf',
      },
    }
  },
  computed: {
    options () {
      return this.$store.getters['user/districts']
    }
  },
  watch: {
    val (val) {
      this.value = val
    },
  },
  methods: {
    onInput (e) {
      this.$emit('change', e[e.length - 1], e)
    },
    getLabel () {
      const node = this.$refs.cascader.getCheckedNodes(true)
      let ret = ''
      try {
        ret = node[0].pathLabels.join('/')
      } catch (e) {}
      return ret
    }
  },
}
</script>

<style scoped>

</style>
